<template>
  <div>
    <a-radio-group v-model:value="barType" button-style="solid" v-if="graphTypeDictOptions.length > 1">
      <template v-for="graphType in graphTypeDictOptions" :key="`${graphType.value}`">
        <a-radio-button :value="graphType.value">
          {{ graphType.text }}
        </a-radio-button>
      </template>
    </a-radio-group>
    <chart :chartData="chartData" :head="head" :graphType="barType" :aliases="aliases" :title="graphTypeDictOptions.length === 1 ? title : ''" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import Chart from './Chart.vue';

  export default defineComponent({
    name: 'TabGraphreportAutoChart',
    components: {
      Chart,
    },
    props: {
      chartData: {
        type: Array,
        default: () => [],
      },
      head: {
        type: Object,
        default: () => ({}),
      },
      graphTypeDictOptions: {
        type: Array,
        default: () => [],
      },
      title: {
        type: String as PropType<string>,
        default: '',
      },
      aliases: {
        type: Array,
        default: () => [],
      },
    },
    setup(props, { emit }) {
      const barType = ref<Boolean>(false);

      barType.value = props.graphTypeDictOptions.length > 0 && props.graphTypeDictOptions[0] && props.graphTypeDictOptions[0].value;

      return { barType };
    },
  });
</script>
